<template>
    <div class="wrapper">
        <top-bar :shadow="true">
            <template v-slot:title>
                {{$t('Feedback')}}
            </template>
        </top-bar>
        <div class="container">
            <div class="content">
                <div>
                    <textarea v-model="feedbackInput" class="text-area" name="feedback" style="resize:none;" :placeholder="$t('Please fill your feedback')"></textarea>
                    <yowin-input class="input" v-model:input="contactInput" :placeholder="$t(contactPlaceholder)"></yowin-input>
                    <div class="contact">
                        <div class="contact-title">{{$t('Contact us')}}</div>
                        <div class="contact-content">
                            <div class="icon"></div>
                            <div class="email">service@backgardon.com</div>
                        </div>
                    </div>
                </div>
                <div class="button" @click="clickButton">{{$t('Submit')}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import TopBar from '../../../components/TopBar/index.vue'
import {UserApi} from '@@/api/api.js'
import {reactive,toRefs,inject,getCurrentInstance} from 'vue'
import { Toast } from 'vant'
import YowinInput from '../../../components/Input/index.vue'
import {debounce} from '@@/utils/common.js'
import {useMeInfo} from '../components/useMeInfo.js'
import {useRouter} from 'vue-router'

export default {
    components:{
        TopBar,
        YowinInput
    },
    setup(props) {
        const {proxy} = getCurrentInstance()
        const vueState = inject('vueState')
        const {getFeedbackInfo} = useMeInfo()
        const router = useRouter()
        const state = reactive({
            feedbackInput:'',
            contactInput:'',
            contactPlaceholder:'Enter your email or Mobile phone number'
        })
        const clickButton = ()=> {
            if(state.feedbackInput && state.contactInput){
                if(vueState.pageStatus.feedback){
                    Toast(proxy.$t('Too fast. Please try again later'))
                    return
                }
                debounce(feedBack(),500)
            }else{
                Toast(proxy.$t('Please complete'))
            }
            
        }
        const feedBack = async ()=> {
            Toast.loading({duration:0,message:`${proxy.$t('Loading')}...`})
            UserApi.FeedBack({
                feedBack:state.feedbackInput,
                contactInfo:state.contactInput,
                groupId:0
            }).then(()=>{
                Toast.success(proxy.$t('Success'))
                router.replace({name:'feedbackRecord'})
            }).catch((e)=>{
                window.trackEvent({ev:'clickSubmit',remarks:'status:others'})
                console.log(e);
                setTimeout(()=>{
                    Toast.clear()
                },3000)
            })
            vueState.pageStatus.setFeedback()
            window.trackEvent({ev:'clickSubmit',remarks:`status:success,feedback:${state.feedbackInput},phone:${state.contactInput}`})
            
        }
        window.trackEvent({ev:'showFeedback'})
        return {
            ...toRefs(state),
            clickButton,
            vueState
        }
    }
}
</script>
<style lang="less" scoped>
input,textarea{
    border: none;
    outline: none;
    &::placeholder{
        color: #999999;
    }
}
.wrapper{
    height: 100%;
    background-color: white;
    .container{
        height: 100%;
        padding:.32rem .2rem 0;
        .content{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .title{
                font-size: .18rem;
                font-weight: 500;
                color: #333333;
            }
            .text-area{
                height: 2.11rem;
                width: 100%;
                padding:.12rem .2rem;
                display: block;
                background: #F4F7FE;
                border-radius: .1rem;
                font-size:.14rem;
                font-weight: 500;
                line-height: .14rem;
                color: #1B2559;
                &::placeholder{
                    color: #8F9BBA;
                    font-weight: 400;
                }
            }
            .input{
                margin-top:.24rem;
            }
            .contact{
                margin-top: .32rem;
                &-title{
                    font-size: .16rem;
                    font-weight: 500;
                    line-height: .32rem;
                    color: #121314;
                }
                &-content{
                    margin-top: .12rem;
                    display: flex;
                    align-items: center;
                    .icon{
                        height: .2rem;
                        width: .2rem;
                        background: url(../../../assets/images/feedback_email.svg) no-repeat center;
                        background-size: contain;
                    }
                    .email{
                        margin-left: .08rem;
                        font-size: .16rem;
                        font-weight: 400;
                        color:#4D94FF;
                        line-height: .28rem;
                        text-decoration: underline;
                    }
                }
            }
            .button{
                width: 100%;
                margin-bottom: .32rem;
                height: .46rem;
                font-weight: 700;
                font-size: .16rem;
                flex-shrink: 0;
                .unique-button()
            }
        }
        
    }
}
</style>